import Vue from "vue";
import VueRouter from "vue-router";
import sidebar from "./modules/sidebar.js";
import Layout from "@/views/layout/layout";

// 解决路由重复点击问题
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function (location) {
  return originalPush.call(this, location).then(res => res).catch(err => err);
};
const originalReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function (location) {
  return originalReplace.call(this, location).then(res => res).catch((err) => err);
};


Vue.use(VueRouter);

/**
 * 注意：子菜单仅在 route children.length >= 1 时出现
 * hidden: false                 如果设置为 true，项目将不会显示在侧边栏中 ( 默认为 false )
 * need: false                   如果想要在子菜单只有一个时显示，设置 need 为 true ( 默认为 false )，注意：当设置为 true 时设置 meta，并配置 title
 * component: '' 								 路由要渲染的组件 ( 如果是单层的路由 component 配置为 Layout，如果是多层的嵌套路由，又不想新建组件可配置为如下例子 )
 * >		component: Layout,
 * >		component: {
 * >		  render: h => h('router-view'),
 * >		},
 * name: ''                 		 路由组件的名字 ( 路由组件必须配置，路由的跳转通过路由的 name )
 * meta : { 										 路由元信息
 *   roles: ['admin','editor']    控制页面角色 ( 可以设置多个角色, roles 必须为数组 )
 *   title: ''                    侧边栏和面包屑中显示的名称 ( 如果不配置则使用 name )
 *  icon: '' 										 侧边栏中的图标显示 ( 支持 element 中的 icon )
 * }
 */

/**
 * 恒定路线
 * 没有权限要求的基本页面
 * 所有角色都可以访问
 */
const constantRoutes = [
  {
    path: "/login",
    component: () => import("@/views/login"),
    name: "Login",
  },
  ...sidebar,
];

/**
 * 异步路由
 * 需要根据用户角色动态加载的路由
 */
export const asyncRoutes = [
  {
    path: "/date-picker",
    component: Layout,
    children: [
      {
        path: "index",
        component: () => import("@/views/date-picker"),
        name: "DatePicker",
        meta: { title: "日期选择", icon: "el-icon-sunrise-1" },
      },
    ],
  },
  {
    path: "/menu",
    component: Layout,
    meta: { title: "Menu", icon: "el-icon-menu" },
    children: [
      {
        path: "menu-01",
        component: () => import("@/views/menu/menu-01"),
        name: "Menu-01",
        meta: { title: "Menu-01" },
      },
      {
        path: "menu-02",
        component: {
          render: (h) => h("router-view"),
        },
        meta: { title: "Menu-02" },
        children: [
          {
            path: "menu-02-01",
            component: () => import("@/views/menu/menu-02-01"),
            name: "Menu-02-01",
            meta: { title: "Menu-02-01" },
          },
          {
            path: "menu-02-02",
            component: () => import("@/views/menu/menu-02-02"),
            name: "Menu-02-02",
            meta: { title: "Menu-02-02", roles: ["menu-02-02"] },
          },
          {
            path: "menu-02-03",
            component: () => import("@/views/menu/menu-02-03"),
            name: "Menu-02-03",
            meta: { title: "Menu-02-03", roles: ["menu-02-03"] },
          },
        ],
      },
      {
        path: "menu-03",
        component: () => import("@/views/menu/menu-03"),
        name: "Menu-03",
        meta: { title: "Menu-03", roles: ["menu-03"] },
      },
      {
        path: "menu-04",
        component: {
          render: (h) => h("router-view"),
        },
        meta: { title: "Menu-04" },
        children: [
          {
            path: "menu-04-01",
            component: () => import("@/views/menu/menu-04-01"),
            name: "Menu-04-01",
            meta: { title: "Menu-04-01" },
          },
          {
            path: "menu-04-02",
            component: () => import("@/views/menu/menu-04-02"),
            name: "Menu-04-02",
            meta: { title: "Menu-04-02", roles: ["menu-04-02"] },
          },
          {
            path: "menu-04-03",
            component: () => import("@/views/menu/menu-04-03"),
            name: "Menu-04-03",
            meta: { title: "Menu-04-03", roles: ["menu-04-03"] },
          },
        ],
      },
      {
        path: "menu-05",
        component: () => import("@/views/menu/menu-05"),
        name: "Menu-05",
        meta: { title: "Menu-05", roles: ["menu-05"] },
      },
    ],
  },
  {
    path: "/calendar",
    component: Layout,
    children: [
      {
        path: "index",
        component: () => import("@/views/calendar"),
        name: "Calendar",
        meta: { title: "日历", icon: "el-icon-date", roles: ["calendar"] },
      },
    ],
  },
  {
    path: "/upload",
    component: Layout,
    children: [
      {
        path: "index",
        component: () => import("@/views/upload"),
        name: "Upload",
        meta: { title: "上传", icon: "el-icon-upload" },
      },
    ],
  },
];



const createRouter = () =>
  new VueRouter({
    mode: "history",
    base: process.env.BASE_URL,
    routes: constantRoutes,
  });

const router = createRouter();

export function resetRouter() {
  const newRouter = createRouter();
  /**
   * 当我们要重置路由时只需要替换掉路由实例的 matcher 属性值即可
   * 因为当我们跳转路由时都是在 matcher 查找路由的匹配项，然后实现路由的跳转，因此重新赋值则可以重置路由
   */
  router.matcher = newRouter.matcher;
}

export default router;
